<template>
	<view>
		<view class="top">
			<image src="../../static/pagesA-img/images/tit2.png" class="tit-img" mode="widthFix"></image>
		</view>
		<view class="search-input">
			<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
			<input type="text"  placeholder="搜索标题" v-model="title" confirm-type="search" @confirm="search_good" placeholder-style="color:#cccccc">
			<image lazy-load="true" v-if="title" @click="cleanInput()" src="../../static/images/close-btn.png" class="close-btn"></image>
		</view>
		<view class="select-box">
			<view class="brand_box">
				<picker @change="bindPickerChange" :value="index" :range="brand_list">
				    <view class="text">{{brand_list[index]}}</view>
					<image src="../../static/pagesA-img/images/jiantou.png" class="jiantou" mode=""></image>
				</picker>
			</view>
			<view class="brand_box">
				<picker @change="bindPickerChange1" :value="index1" :range="category_list">
				    <view class="text">{{category_list[index1]}}</view>
					<image src="../../static/pagesA-img/images/jiantou.png" class="jiantou" mode=""></image>
				</picker>
			</view>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item,key) in goods_list" :key="key">
				<image :src="item.image" class="goods_img" @click="goGoodDetail(item.id)" mode=""></image>
				<view class="msg">
					<view class="goods_msg">
						<view class="goods_name">
							{{item.title}}
						</view>
						<view class="like_box" @click="add_praise(item.id)">
							<image v-if="!item.has_praise" src="../../static/pagesA-img/images/aixin.png" class="taoxin" mode=""></image>
							<image v-if="item.has_praise" src="../../static/pagesA-img/images/hongxim.png" class="taoxin" mode=""></image>
							<view class="like_num">
								{{item.like_count}}
							</view>
						</view>
					</view>
					<view class="goods_dec">
						{{item.sub_title}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="write-box">
			<image lazy-load="true"  src="../../static/images/huishou.png" @click="goPost()" class="write"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				index: 0, //品牌
				index1: 0, //分类
				stauts_code: 0,
				p: 0,
				per: 1000000,
				brand_id: 0,
				category_id: 0,
				user_id: 0,
				title: '',
				goods_list:[],
				brand_list:['全部'],
				category_list:['全部'],
				brand_index:[0],
				category_index:[0],
				active_brand_index:0,
				active_category_index:0,
			}
		},
		onLoad(e) {
			this.brand_id = e.brand_id;
			this.category_id = e.category_id;
			this.active_brand_index = e.brand_id;
		},
		onShow() {
			var self = this;
			self.$request.request({
				url:'/user/info',
				success:function(res){
					self.stauts_code = res.code
					if(res.code==200){
						self.user_id = res.result.id
					}
					self.getList();
				}
			});
			
			self.getBrandList();
			// self.getCategoryList();
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name+'.家具定制专区', // 分享标题
				link: self.$request.h5_share_url+'?page=custom-list&id='+self.brand_id+'&category_id='+self.category_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '领得定制产品', // 分享描述
				link: self.$request.h5_share_url+'?page=custom-list&id='+self.brand_id+'&category_id='+self.category_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
			
		},
		methods: {
			bindPickerChange: function(e) {
			    this.index = e.target.value;
				this.active_brand_index = this.brand_index[this.index];
				this.brand_id = this.brand_index[this.index];
				this.category_list = ['全部'];
				this.category_index = [0];
				this.active_category_index = 0;
				this.index1 = 0;
				this.category_id = 0;
				this.getCategoryList();
				this.getList();
				
			},
			bindPickerChange1: function(e) {
			    this.index1 = e.target.value;
				this.active_category_index = this.category_index[this.index1];
				this.category_id = this.category_index[this.index1];
				this.getList();
			},
			getList(){
				var self = this;
				console.log(self.user_id)
				self.$request.request({
					url:'/customized/list',
					data:{
						p:self.p,
						per:self.per,
						brand_id:self.brand_id,
						category_id:self.category_id,
						title:self.title,
						user_id:self.user_id,
					},
					success:function(res){
						uni.hideLoading();
						if(res.code==200){
							var x = res.result;
							x.forEach( (item,index) =>{
								x[index].image = self.$http_img(item.image)
							});
							self.goods_list = x;
							console.log(self.goods_list)
						}
					}
				});
			},
			getBrandList(){
				var self = this;
				self.$request.request({
					url:'/customized/brand',
					success:function(res){
						if(res.code==200){
							var x = res.result;
							x.forEach( (item,index) =>{
								self.brand_list.push(item.title);
								self.brand_index.push(item.id);
							});
							self.index = self.getIndex(self.brand_index,self.brand_id)
							self.getCategoryList()
						}
					}
				});
			},
			getIndex(arr,item){
			        for(var i in arr){
			            if(arr[i] == item){
			              return i;
			            };
			        };
			    },
			getCategoryList(){
				var self = this;
				self.$request.request({
					url:'/customized/category',
					data:{
						brand_id:self.active_brand_index,
						only:1
					},
					success:function(res){
						console.log(res)
						if(res.code==200){
							var x = res.result;
							x.forEach( (item,index) =>{
								self.category_list.push(item.title);
								self.category_index.push(item.id);
							});
							self.index1 = self.getIndex(self.category_index,self.category_id)
						}
					}
				});
			},
			search_good(e){
				uni.showLoading({
				    title: '加载中'
				});
				this.title=e.detail.value;
				this.getList();
			},
			cleanInput(){
				this.title ='';
				this.getList();
			},
			add_praise(id){
				var self = this;
				console.log(id);
				console.log(self.stauts_code);
				
				if(self.stauts_code == 40003){
					uni.navigateTo({
						url:'../../pages/login/login?page=custom-list&brand_id='+self.brand_id+'&category_id='+self.category_id
					})
				}else{
					self.$request.request({
						url:'/customized/product_praise',
						data:{
							customized_id:id,
							user_id:self.user_id
						},
						success:function(res){
							console.log(res)
							if(res.code==200){
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								});
								if(res.msg == '点赞成功！'){
									// self.is_prise = true;
									self.goods_list.forEach((item,index)=>{
										if(item.id == id){
											self.goods_list[index].has_praise = true;
											self.goods_list[index].like_count++
										}
									})
									
								}
								
							}else{
								
							}
						}
					});
				}
			},
			goGoodDetail(id){
				uni.navigateTo({
				    url: '../custom-detail/custom-detail?id='+id
				});
			},
			goPost(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
@import url("custom-list.css");
</style>
